<template>
    <div :style="groupStyle" @click="groupClickHandle()">
        <div class="grid-container" :style="itemStyle">
            <div v-for="(item, index) in obj.tableData.group" :key="index" class="statusitem"
                @dblclick.stop="statusItemClick(index, obj.tableData.group)">
                <StatusItem :item="item" :obj="obj" :isEdit="isEdit"
                    :class="{ 'itemactive': obj.tableData.selectedIndex == index && isEdit }" :reload="getLineData">
                </StatusItem>
            </div>
        </div>
    </div>
</template>

<script>
import StatusItem from "./StatusItem.vue"
// import { cardDataLoad, boardLoad } from '@/api/share'

export default {
    Name: "StatusGroup",
    components: {
        StatusItem
    },
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            filterForm: {
                pageInfo: {
                    pageSize: 999,
                    page: 1,
                    totalCount: 0
                },
                tableId: 0,
                structureIds: [],
                beginTime: undefined,
                endTime: undefined,
                sortType: "1",
                dateTime: "",
            },
            groupStyle: {},
            // 用于比对数据是否修改
            dataStr: "",
            timer: null,
            // new
            groupSize: 0,
            itemStyle: {},
            // 选中状态图
            // selectedIndex: -1,
            loadCount: 0,
        }
    },
    mounted() {
        this.setStyle();
        this.reloadInfo();

        this.obj.tableData.selectedIndex = -1;
        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    methods: {
        reloadInfo() {
            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            const end = new Date();
            const start = new Date();
            if (this.obj.tableData.type != 1) {
                this.filterForm.isOnlie = true;

                // 查询一天内数据
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                this.filterForm.beginTime = this.parseTime(start);
                this.filterForm.endTime = this.parseTime(end);
            } else {
                this.filterForm.isOnlie = false;

                start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                this.filterForm.beginTime = this.parseTime(start, "{y}-{m}-{d}");
                this.filterForm.endTime = this.parseTime(end);

                // 刷新时间兼容处理
                if (timeSize < 60) {
                    timeSize = 60;
                }
            }

            clearInterval(this.timer);
            this.getLineData();

            if (this.isReload) {
                this.timer = setInterval(() => {
                    const end = new Date();
                    this.filterForm.endTime = this.parseTime(end);

                    this.getLineData();
                }, timeSize * 1000);
            }
        },
        setStyle() {
            var style = this.obj.style;
            // 创建数组对象
            var groupCount = this.obj.tableData.lines * this.obj.tableData.rows;
            if (this.obj.tableData.group.length > groupCount) {
                this.obj.tableData.group.splice(groupCount, this.obj.tableData.group.length - groupCount);
            } else if (this.obj.tableData.group.length < groupCount) {
                for (var i = 0; i < groupCount - this.obj.tableData.group.length; i++) {
                    this.obj.tableData.group.push({
                        title: "",
                        lineId: "",
                        isShowValue: true,
                        isShowText: false,
                        isBreakLine: false,
                        decimal: 2,
                        value: 0,
                        statusList: [
                            {
                                value: 0,
                                color: this.obj.tableData.defaultColor,
                                backgroundColor: this.obj.tableData.defautlBGColor,
                                valSize: 16,
                                valColor: this.obj.tableData.defaultColor,
                                valFontWeight: '',
                                valFontStyle: '',
                                text: "",
                                textSize: 16,
                                textColor: this.obj.tableData.defaultColor,
                                textFontWeight: '',
                                textFontStyle: '',
                                backgroundImage: "",
                                isTwinkle: false,
                                bgType: 0, // 0-图片，1-图标
                                iconGroup: "",
                                iconColor: this.obj.tableData.defaultColor,
                                isNull: false, // 是否镂空
                            }
                        ],
                        showType: 2,
                        unit: "",
                        unitSize: 16,
                        unitColor: this.obj.tableData.defaultColor,
                        unitFontWeight: '',
                        unitFontStyle: '',
                        style: {
                            fontSize: 16,
                            justifyContent: "center",
                            alignItems: "center",
                            borderColor: "",
                            borderWidth: 0,
                            color: this.obj.tableData.defaultColor,
                            backgroundColor: this.obj.tableData.defautlBGColor,
                            backgroundImage: "",
                            borderRadius: 0,
                            fontWeight: '',
                            fontStyle: '',
                        }
                    });
                }
            }

            this.itemStyle = {
                display: "grid",
                top: style.borderWidth + "px",
                bottom: style.borderWidth + "px",
                left: style.borderWidth + "px",
                right: style.borderWidth + "px",
            }
            var columns = "";
            var rows = "";
            for (var i = 0; i < this.obj.tableData.lines; i++) {
                rows += "auto ";
            }
            for (var i = 0; i < this.obj.tableData.rows; i++) {
                columns += "auto ";
            }
            this.itemStyle.gap = this.obj.tableData.lineWidth + "px";
            this.itemStyle.gridTemplateColumns = columns;
            this.itemStyle.gridTemplateRows = rows;


            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.groupStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                borderStyle: "solid",
                // justifyContent: style.justifyContent,
                // alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
            }

            // if(style.borderWidth){
            //     this.itemStyle.insert = style.borderWidth + "px";
            // }

            // this.titleStyle = {
            //     fontSize: style.fontSize + "px",
            //     color: style.color,
            //     fontWeight: style.fontWeight,
            //     fontStyle: style.fontStyle,
            // };

            // var data = this.obj.tableData;
            // var unitSize = data.unitSize;
            // var unitColor = data.unitColor;
            // var unitFontWeight = data.unitFontWeight;
            // var unitFontStyle = data.unitFontStyle;
            // this.unitStyle = {
            //     fontSize: unitSize + "px",
            //     color: unitColor,
            //     fontStyle: unitFontStyle,
            //     fontWeight: unitFontWeight,
            // };
        },
        getLineData() {
            if (this.obj.tableData.tableId && this.obj.tableData.group.length) {
                this.showContent = true;
                this.filterForm.tableId = this.obj.tableData.tableId;
                this.filterForm.pageInfo.pageSize = 1;
                var idlist = [];
                this.obj.tableData.group.forEach(e => {
                    if (e.lineId) {
                        idlist.push(e.lineId);
                    }
                });
                this.filterForm.structureIds = idlist;
                if (this.obj.tableData.type != 1) {
                    cardDataLoad(this.filterForm).then((res) => {
                        if (res.data.code == 0) {
                            if (res.data.data.dataResult.columns && res.data.data.dataResult.dataList) {
                                this.setGroupValues(res.data.data.dataResult.columns, res.data.data.dataResult.dataList[0]);
                            }
                        } else {
                            console.error(res.data.message)
                        }
                    }).catch(() => {
                        clearInterval(this.timer)
                    });
                } else {
                    boardLoad(this.filterForm).then((res) => {
                        if (res.data.code == 0) {
                            if (res.data.data.dataResult.columns && res.data.data.dataResult.dataList) {
                                this.setGroupValues(res.data.data.dataResult.columns, res.data.data.dataResult.dataList[0]);
                            }
                        } else {
                            console.error(res.data.message)
                        }
                    }).catch(() => {
                        clearInterval(this.timer)
                    });;
                }
            }
        },
        // 计算精度
        valFormat(value) {
            if (value >= 0 && this.obj.tableData.decimal >= 0) {
                return Number(value).toFixed(this.obj.tableData.decimal);
            }
            return value;
        },
        setGroupValues(columns, dataList) {
            var self = this;
            var group = [];
            this.obj.tableData.group.forEach((e, i) => {
                var isPush = false;
                for (var j = 0; j < columns.length; j++) {
                    var val = columns[j];
                    if (e.lineId === val.id) {
                        e.value = dataList[j];
                        group.push(e);
                        isPush = true;
                        break;
                    }
                }
                if (!isPush) {
                    group.push(e);
                }
            })
            // console.log(group)
            this.$set(this.obj.tableData, 'group', group);
        },
        // 选中状态图
        statusItemClick(index) {
            // this.obj.tableData.selectedIndex = index;
            this.$set(this.obj.tableData, "selectedIndex", index);
            this.$emit('change', this.obj);
            return false;
        },

        groupClickHandle() {
            // this.obj.tableData.selectedIndex = -1;
            this.$set(this.obj.tableData, "selectedIndex", -1);
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
                if (this.loadCount != newVal.tableData.count) {
                    this.loadCount = this.obj.tableData.count;
                    this.reloadInfo();
                }
            }
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>

<style>
.statusitem {
    position: relative;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
}

.itemactive {
    border: solid 1px #0081ED !important;
}
</style>